<template>
	<view class="grid col-4 step_contain">
		<view :data-index="index"
		 class="cu-item" v-for="(item,index) in stepList" :key="index">
			<text style="font-size: 14px;color: #333;margin-bottom: 5px;" >{{item.name}}</text>
			<view class="circleBox" :class="[{circleBoxBor:index !=stepList.length-1}]">
				<view class="c-circle" :class="[{'active':index==status&&status!=4 ,'active2':index==status&&status==4}]">
					<view class="c-circle-in" v-if="index<=status"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {stepList} from '../util.js'
	export default {
		props:{
			status:Number,
			stepList: {
				type: Array,
				default: [{
						name: 'Check',
						code: "check",
						checked: true
					}, {
						name: 'Collect',
						code: "collect",
						checked: false
					},
					{
						name: 'Review',
						code: "review",
						checked: false
					}, {
						name: 'Confirm',
						code: "confirm",
						checked: false
					}
				]
			}
		},
		data() {
			return {
				// stepList: stepList,
			}
		},
	}
</script>

<style scoped lang="scss">
	.step_contain {
		width: 100%;
		background-color: #fff;
		
		padding-left: 12px;
		display: flex;
		.cu-item{
			flex: 1;
		}
		.circleBox {
			width: 100%;
			position: relative;
		}
		
		.c-circle {
			width: 30px;
			height: 30px;
			border-radius: 50px;
			border: 1px solid #8E8E8E;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.c-circle-in {
				width: 15px;
				height: 15px;
				border-radius: 50px;
				background-color: #fff;
			}
		}
		.active{
			background-color: #FA8C16;
			border:none
		}
		.active2{
			background-color: #39B54A;
			border:none
		}
	
		.circleBoxBor::after {
			content: " ";
			position: absolute;
			left: 30px;
			bottom: 50%;
			// width: 90%;
			width: calc(100% - 30px);
			background-color: #ccc;
			height: 1px;
		}
	}
	
	
</style>
